<template>
  <view class="page padding-top-xl">
    <!-- 如果是小程序开发者工具或者是微信才显示顶部导航 -->
    <CommonNavbar bgColor="#FFFEFA" :autoBack="false"
      v-if="systemInfo.platform === 'devtools' || systemInfo.platform === 'wechat'"></CommonNavbar>

    <view class="main padding-lr-sm" v-if="state.childrenList.length || state.classList.length">
      <!-- 头部用户信息 -->
      <view class="flex align-center justify-between" :class="systemInfo.platform === 'android' ? 'margin-top-lg' : ''">
        <!-- 老师 -->
        <view v-if="state.userInfo.userIdentity == 1">
          <up-text color="black" size="16" :text="'班级：' + state.currentInfo.className"
            @click="state.showClassPicker = true"></up-text>
        </view>
        <!-- 家长 -->
        <view class="flex" v-if="state.userInfo.userIdentity == 2">
          <up-avatar size="32" :src="`${IMAGE_URL}${state.currentInfo.sex == 1
            ? '/profile/content/2025/04/28/kMTk1KgLHBdoc948cab5bf14490df9d142be00d82eb2_20250428141815A002.png'
            : '/profile/content/2025/04/28/n6eVNhK19FSQ0889c47942285ae807a2959e9c7c92e1_20250428141907A004.png'
            }`"></up-avatar>
          <up-text color="black" size="16" :text="'姓名：' + state.currentInfo.nickname"
            @click="state.showClassPicker = true" margin="0 0 0 20rpx"></up-text>
        </view>

        <view>
          <up-button text="新建日报" size="mini" type="primary"
            customStyle="width:112rpx !important;height:50rpx !important" @click="createReport"></up-button>
        </view>
      </view>
      <!-- 有报告数据时显示 -->
      <template v-if="state.reportData">
        <view>
          <up-text size="36rpx" text="开心积极" align="center"></up-text>
        </view>

        <!-- 标题 -->
        <view class="margin-top">
          <up-text size="56rpx" color="#3D511D" text="标题：考试周记录" align="center" weight="500"></up-text>
          <view class="flex align-center margin-top-sm justify-center">
            <up-text prefixIcon="clock" size="24rpx" color="#B7B7B7" text="2024.01.15 星期三" align="right"
              margin="0 0 0 30rpx" iconStyle="margin:0 10rpx;margin-top:4rpx;color:#666666"></up-text>
            <up-text prefixIcon="clock" size="24rpx" color="#B7B7B7" text="时间：13:00" align="left"
              iconStyle="margin:0 10rpx 0 40rpx;margin-top:4rpx;color:#666666"></up-text>
          </view>
        </view>

        <view class="echarts-box">
          <!-- 八维图 -->
          <view class="chart-box padding-lr-sm">
            <up-text size="36rpx" color="#3D511D" text="八维图" weight="400" align="center"></up-text>

            <view class="white-box margin-top-sm">
              <view style="width: 100vw; height: 550rpx">
                <l-echart ref="radarChart"></l-echart>
              </view>
            </view>
          </view>
          <!-- 发展建议 -->
          <view class="chart-box padding-lr-sm">
            <up-text size="36rpx" color="#3D511D" text="学习成绩" margin="12px 0 0 0" weight="400" align="center"></up-text>
            <view class="white-box margin-top-sm">
              <view class="flex justify-between padding-lr">
                <view class="text-sm bg-pink text-white padding-lr-sm padding-tb-xs radius">
                  语文
                </view>
                <view class="green-year"> 年度：2025 </view>
              </view>
              <view style="width: 100vw; height: 450rpx">
                <l-echart ref="scoreChart"></l-echart>
              </view>
            </view>
            <view class="white-box margin-top-sm">
              <view class="flex justify-between padding-lr">
                <view class="text-sm text-darkgray"> 总科分析折线图分析 </view>
                <view class="orange-year"> 年度：2025 </view>
              </view>
              <view style="width: 100vw; height: 450rpx">
                <l-echart ref="totalScoreChart"></l-echart>
              </view>
            </view>
          </view>

          <!-- 解决点评 -->
          <view class="padding-lr-sm">
            <up-text size="36rpx" color="#3D511D" text="解决与点评" weight="400" margin="12px 0 0 0"
              align="center"></up-text>
            <view class="white-box margin-top-sm padding-lr-sm">
              <view class="review-item">
                <text class="text-df text-gray">激发积极性：</text>
                <text class="text-df text-darkgray">奖赏机制</text>
              </view>
              <view class="review-item">
                <text class="text-df text-gray">学习薄弱描述：</text>
                <text class="text-df text-darkgray">数学的计算题不好</text>
              </view>
              <view class="review-item">
                <text class="text-df text-gray">学习计划：</text>
                <text class="text-df text-darkgray">错题整理</text>
              </view>
            </view>
          </view>
        </view>
      </template>
      <!-- 没有报告数据时显示 -->
      <view style="margin-top: 10vh" v-else>
        <up-empty mode="data" text="暂无信息" iconSize="200rpx" icon="/static/images/icon-empty.png">
        </up-empty>
        <view style="margin-top: 200rpx">
          <up-button type="primary" text="新建日报" shape="circle" @click="createReport"></up-button>
        </view>
      </view>
      <up-popup :show="state.selectSubject">
        <view class="padding-tb-sm padding-lr">
          <up-icon name="close" @click="closeSelectSubject"></up-icon>
          <up-text size="18" text="选择科目" align="center"></up-text>
          <up-text size="16" text="主课" margin="20px 0 0 0"></up-text>
          <view class="flex margin-top-sm">
            <view class="class-item" :class="state.currSubject === item.id ? 'active' : ''"
              v-for="(item, index) in mainClasses" :key="index" @click="state.currSubject = item.id">{{ item.name }}
            </view>
          </view>

          <up-text size="16" text="副课" margin="20px 0 0 0"></up-text>
          <view class="flex margin-top-sm">
            <view class="class-item" :class="state.currSubject === item.id ? 'active' : ''"
              v-for="(item, index) in subClasses" :key="index" @click="state.currSubject = item.id">{{ item.name }}
            </view>
          </view>
        </view>
      </up-popup>
      <!-- 班级选择器 -->
      <up-picker :show="state.userInfo.userIdentity == 1 && state.showClassPicker" :columns="[state.classList]"
        keyName="className" @cancel="state.showClassPicker = false" @confirm="confirmClass"></up-picker>
      <!-- 孩子选择器 -->
      <up-picker :show="state.userInfo.userIdentity == 2 && state.showClassPicker" :columns="[state.childrenList]"
        keyName="nickname" @cancel="state.showClassPicker = false" @confirm="confirmClass"></up-picker>
    </view>
    <view class="main flex flex-direction align-center justify-center" v-else>
      <up-empty mode="data" text="暂无信息" iconSize="200rpx" icon="/static/images/icon-empty.png">
      </up-empty>
      <view style="margin-top: 200rpx">
        <!-- 老师 -->
        <up-button type="primary" text="新建班级" shape="circle" @click="createClass"
          v-if="state.userInfo.userIdentity == 1"></up-button>
        <!-- 家长 -->
        <up-button type="primary" text="新建日报" shape="circle" @click="createReport"
          v-if="state.userInfo.userIdentity == 2"></up-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref, getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getUserInfo } from '@/utils/auth';
import { studentListApi } from '@/api/me';
import { getClassListApi } from '@/api/classes';
import * as echarts from 'echarts';
import { IMAGE_URL } from '@/utils/env';
const { appContext } = getCurrentInstance();
const systemInfo = appContext.config.globalProperties.$systemInfo;
console.log("systemInfo", systemInfo)
const radarChart = ref(null);
const scoreChart = ref(null);
const totalScoreChart = ref(null);
const mainClasses = [
  { id: 1, name: '数学' },
  { id: 2, name: '语文' },
  { id: 3, name: '英语' },
  { id: 4, name: '物理' },
  { id: 5, name: '化学' },
  { id: 6, name: '政治' }
];
const subClasses = [
  { id: 7, name: '生物' },
  { id: 8, name: '历史' },
  { id: 9, name: '地理' },
  { id: 10, name: '体育' }
];
const state = reactive({
  showClassPicker: false, //班级选择器
  selectSubject: false, //科目弹窗
  currSubject: 0, //选择的科目
  studentInfo: {}, //学生信息
  userInfo: {},
  childrenList: [],
  classList: [], //班级列表
  currentInfo: '', //当前选中的学生或班级
  reportData: true //日报数据
});

// 家长——>孩子列表
const getChildrenList = async () => {
  const result = await studentListApi();
  if (result.code === 200) {
    state.currentInfo = result.data[0];
    state.childrenList = result.data;
    console.log('state.currentInfo', state.currentInfo)
    createChart();
  } else {
    // uni.$u.toast(result.msg);
  }
};
// 老师——>班级列表
const getClassList = async () => {
  const result = await getClassListApi();
  if (result.code === 200) {
    state.currentInfo = result.data[0];
    state.classList = result.data;
    createChart();
  } else {
    // uni.$u.toast(result.msg);
  }
};
const confirmClass = (item) => {
  console.log(item);
  state.currentInfo = item.value[0];
  state.showClassPicker = false;
  createChart();
};

const createChart = () => {
  if (state.reportData) {
    initRadarChart();
    initScoreChart();
    initActivityChart();
  }
};
// 初始化雷达图
const initRadarChart = async () => {
  if (!radarChart.value) return;
  const myChart = await radarChart.value.init(echarts);
  const option = {
    legend: {
      data: ['昨日', '今日'],
      bottom: '0%',
      left: '30%',
      itemWidth: 10, // 可以根据需要调整大小
      itemHeight: 10, // 确保宽高相等以形成圆形
      itemStyle: {
        borderRadius: 30 // 设置圆角以形成圆形效果
      },
      tooltip: {
        show: true
      },
      textStyle: {
        fontSize: 14
      }
    },
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    },
    radar: {
      radius: '70%',
      center: ['45%', '50%'],
      indicator: [
        { name: '独立和自律', max: 5 },
        { name: '课外兴趣', max: 5 },
        { name: '学术表现', max: 5 },
        { name: '抗挫折', max: 5 },
        { name: '人际沟通', max: 5 }
      ],
      name: {
        textStyle: {
          color: '#20280F',
          fontSize: 14
        }
      }
    },
    series: [
      {
        name: '八位图',
        type: 'radar',
        data: [
          {
            value: [3.2, 4.2, 3.2, 3.0, 3.4],
            name: '昨日',
            lineStyle: {
              color: '#FF950C' // 设置线条颜色为蓝色
            },
            itemStyle: {
              show: false,
              color: '#FF950C' // 数据点颜色
            },
            areaStyle: {
              color: 'rgba(255, 228, 193, 0.41)' // 设置区域背景色，带透明度
            }
          },
          {
            value: [2.8, 5, 5, 5, 5],
            name: '今日',
            lineStyle: {
              color: '#6D9319'
            },
            itemStyle: {
              show: false,
              color: '#6D9319' // 数据点颜色
            },
            areaStyle: {
              color: 'rgba(109, 147, 25, 0.35)' // 设置区域背景色，带透明度
            }
          }
        ]
      }
    ]
  };

  myChart.setOption(option);
};

// 初始化成绩折线图
const initScoreChart = async () => {
  const myChart = await scoreChart.value.init(echarts);
  const option = {
    grid: {
      top: '10%',
      left: '1%',
      right: '15%',
      bottom: '2%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: [
        '第一次月考\r\n2025.3.4',
        '第二次月考\r\n2025.3.4',
        '第三次月考\r\n2025.3.4',
        '第四次月考\r\n2025.3.4',
        '第五次月考\r\n2025.3.4'
      ],
      // boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: '#E5E5E5'
        }
      },
      axisLabel: {
        color: 'rgba(183, 183, 183, 1)',
        interval: 0,
        // rotate: 45,
        fontSize: 12
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: '#E5E5E5'
        }
      },
      axisLabel: {
        show: false,
        color: '#999999'
      }
    },
    series: [
      {
        data: [34, 85, 65, 88, 60],
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#fff'
        },
        lineStyle: {
          color: 'rgba(0, 228, 135, 0.4)'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(0, 228, 135, 0.4)'
              },
              {
                offset: 1,
                color: 'rgba(223, 244, 235, 0.04)'
              }
            ]
          }
        },
        // 添加数值标签
        label: {
          show: true, // 显示标签
          position: 'top', // 标签位置在数据点的上方
          color: '#7DA02F', // 标签文字颜色
          fontSize: 12 // 标签文字大小
        }
      }
    ]
  };
  myChart.setOption(option);
};

// 初始化总科分析折线图
const initActivityChart = async () => {
  const myChart = await totalScoreChart.value.init(echarts);
  const option = {
    grid: {
      top: '10%',
      left: '1%',
      right: '15%',
      bottom: '2%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: [
        '第一次月考\r\n2025.3.4',
        '第二次月考\r\n2025.3.4',
        '第三次月考\r\n2025.3.4',
        '第四次月考\r\n2025.3.4',
        '第五次月考\r\n2025.3.4'
      ],
      // boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: '#E5E5E5'
        }
      },
      axisLabel: {
        color: 'rgba(183, 183, 183, 1)',
        interval: 0,
        // rotate: 45,
        fontSize: 12
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: '#E5E5E5'
        }
      },
      axisLabel: {
        show: false,
        color: '#999999'
      }
    },
    series: [
      {
        data: [34, 85, 65, 88, 60],
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#fff'
        },
        lineStyle: {
          color: '#FF950C'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(253, 167, 56, 0.6)'
              },
              {
                offset: 1,
                color: 'rgba(223, 244, 235, 0.04)'
              }
            ]
          }
        },
        // 添加数值标签
        label: {
          show: true, // 显示标签
          position: 'top', // 标签位置在数据点的上方
          color: '#EF9B25', // 标签文字颜色
          fontSize: 12 // 标签文字大小
        }
      }
    ]
  };
  myChart.setOption(option);
};

// 打开选择课程弹窗
const openSelectSubject = () => {
  state.selectSubject = true;
  // todo 关闭底部导航栏
};
// 关闭选择课程弹窗
const closeSelectSubject = () => {
  state.selectSubject = false;
  // todo 重新加载数据
};
const createClass = () => {
  uni.navigateTo({
    url: '/pages-sub/teacher/createClass'
  });
};
const createReport = () => {
  const id = state.userInfo.userIdentity == 1 ? state.currentInfo.classId : state.currentInfo.sId;
  if (!id) {
    uni.showToast({
      title: '请先选择班级或学生',
      icon: 'none'
    })
  }
  uni.navigateTo({
    url: '/pages-sub/report/create?id=' + id
  });
};
onLoad(async () => {
  state.userInfo = await getUserInfo('userInfo');
  if (state.userInfo.userIdentity == 2) {
    // 如果是父母身份登录，查询关联的孩子列表,默认显示第一个孩子的信息
    getChildrenList();
  } else {
    // 如果是老师身份登录，查询关联的班级列表,默认显示第一个班级的信息
    getClassList();
  }
});
</script>

<style lang="scss" scoped>
.page {
  background: #fffefa;
}

.echarts-box {
  background: linear-gradient(96.96deg,
      rgba(212, 233, 162, 0.4) 0%,
      rgba(184, 211, 122, 0.32) 18.41%,
      rgba(210, 233, 158, 0.36) 42.07%,
      rgba(201, 236, 124, 0.36) 67.49%,
      rgba(233, 255, 184, 0.4) 85.9%);
  border: solid 1px #e9ecef;
  border-radius: 50rpx;
  margin-top: 32rpx;
  padding: 30rpx 0;
}

.white-box {
  background: #fff;
  border-radius: 50rpx;
  padding: 30rpx 0;
  width: 100%;
}

.green-year,
.orange-year {
  font-size: 24rpx;
  font-weight: 400;
  border-radius: 8rpx;
  padding: 0 6rpx;
  height: 50rpx;
  line-height: 50rpx;
}

.green-year {
  border: solid 1px rgba(109, 147, 25, 0.41);
  background: rgba(109, 147, 25, 0.12);
  color: rgba(125, 160, 47, 1);
}

.orange-year {
  border: solid 1px rgba(255, 149, 12, 1);
  background: rgba(253, 176, 75, 0.22);
  color: rgba(239, 155, 37, 1);
}

.review-item {
  margin: 0 30rpx 40rpx 30rpx;
  background: #f3f3f3;
  padding: 20rpx 24rpx;
  border-radius: 12rpx;

  &:first-child {
    margin-top: 20rpx;
  }
}

.class-item {
  background: #f3f3f3;
  width: 15%;
  color: #000;
  font-size: 28rpx;
  text-align: center;
  padding: 20rpx 0;

  &:not(:first-child) {
    margin-left: 20rpx;
  }

  &.active {
    background: #7da02f;
    color: white;
  }
}
</style>
